<!--
 * @Author: your name
 * @Date: 2021-09-13 20:42:12
 * @LastEditTime: 2021-09-13 21:12:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\Web课后练习成果\ES5\复习01\DOM操作\获取元素.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素</title>
</head>

<body>
    <div id="time">2021-09-13</div>
    <ul>
        <li>知否知否</li>
        <li>知否知否</li>
        <li>知否知否</li>
        <li>知否知否</li>
        <li>知否知否</li>
    </ul>
    <ol>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ol>

    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
</body>
<script>
    //通过id进行获得元素
    var timer = document.getElementById('time');
    console.log(timer);
    console.log(typeof timer); //object
    //打印我们返回的元素对象，更好的查看里面的属性和方法
    console.dir(timer);

    //通过元素名来获取元素，得到的是一个类数组的形式出现
    var lis = document.getElementsByTagName("li");
    console.log(lis);
    console.log(lis[0]);
    //依次打印
    for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }

    //如何获取ol中的li元素
    //element.getElementsByTagName('标签名');
    var ol = document.getElementsByTagName('ol');
    //注意：父元素必须时单个对象（必须指明时哪一个元素对象），获取的时候不包括父元素自己
    console.log(ol[0].getElementsByTagName('li'));


    //根据类名获得元素
    var boxs = document.getElementsByClassName("box");
    console.log(boxs);

    //querySelector返回指定选择器的第一个元素对象，只会返回第一个,括号内的参数时选择器记得加符号
    var firstBox = document.querySelector('.box');
    console.log(firstBox);
    var nav = document.querySelector('#nav');
    console.log(nav);

    //querySelectorAll() 返回的是指定选择器的所有元素对象集合
    var allBox = document.querySelectorAll('.box');
    console.log(allBox);
    var li = document.querySelectorAll('li');
    console.log(li);


    //获取特殊元素
    //获取body元素
    // var bodyEle = document.getElementsByTagName('body');
    var bodyEle = document.body; //返回body元素对象
    console.log(bodyEle);

    //获取html元素
    var htmlEle = document.documentElement;
    console.log(htmlEle);
</script>

</html>